import React, { useEffect } from "react";
import { HeaderTab } from "@ct0/ui";
import { useState } from "react";

const { Pane } = HeaderTab;
export default function HeaderTabPanel() {
  const [tab, setTab] = useState("tab2");

  return (
    <div>
      <h2>HeaderTab: 页面级Tab</h2>
      <ul>
        <li>HeaderTab 会把当前选择的 tab 信息同步到 url上， 普通 tab 不会</li>
        <li>HeaderTab 会从 url 读取 tab 选中信息，普通 tab 不会</li>
      </ul>
      <h2>代码演示</h2>
      <div>
        <ul>
          <li key="basic">调用示例</li>
        </ul>
        <br />
        <button onClick={() => setTab("tab1")}>切换 tab 1 </button> &nbsp;
        <button onClick={() => setTab("tab2")}>切换 tab 2 </button>
        <br />
        <div>
          <HeaderTab value={tab} onChange={setTab}>
            <Pane title="tab1">
              <div style={{ paddingLeft: "16px" }}>Tab1 context</div>
            </Pane>
            <Pane title="tab2">
              <div style={{ paddingLeft: "16px" }}>Tab2 context</div>
            </Pane>
          </HeaderTab>
        </div>
        <br />
        <div>
          <HeaderTab onChange={setTab}>
            <Pane title="tab1">
              <div style={{ paddingLeft: "16px" }}>Tab1 context</div>
            </Pane>
            <Pane title="tab2">
              <div style={{ paddingLeft: "16px" }}>Tab2 context</div>
            </Pane>
          </HeaderTab>
        </div>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { HeaderTab } from '@ct0/ui'

const { Pane } = HeaderTab

const Demo = () => (

<HeaderTab>
    <Pane title="tab1">Tab1 context</Pane>
    <Pane title="tab2">Tab2 context</Pane>
</HeaderTab>
)

ReactDOM.render(<Demo />,mountNode)`}
            </code>
          </pre>
        </div>
      </div>
      <h2>API</h2>
      <table border="1" width="60%">
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>children</td>
            <td>HeaderTabPane(必填)</td>
            <td>React.ReactNode</td>
            <td>-</td>
          </tr>
          <tr>
            <td>urlSearchKey</td>
            <td>需要查询的url参数(选填)</td>
            <td>string</td>
            <td>-</td>
          </tr>
          <tr>
            <td>value</td>
            <td>设置当前选中 tab 的值, 可以为空</td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>onChange</td>
            <td>当 tab 产生变化时, 触发改方法</td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
